<template>
  <div class="videostyle">
    <div>
      <el-popover
        placement="bottom-start"
        :popper-class="allvideo"
        width="41.875rem"
        ref="popover"
      >
        <el-button class="all-btn" plain round @click="allClick"
          >全部视频</el-button
        >
        <div class="video-box">
          <!-- 语言 -->
          <div>
            <div class="video-item">
              <div class="video-right">
                <ul>
                  <li
                    :style="{
                      color: item.name == upactiveText ? themeColor : ''
                    }"
                    v-for="(item, index) in categories"
                    :key="index"
                    @click="onlabelClick(item.name, item.id)"
                    @mouseover="upActive(item.name)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="all-label" slot="reference">
          {{ labelname !== "" ? labelname : "全部视频" }}
          <i class="el-icon-arrow-right"></i>
        </div>
      </el-popover>
    </div>
    <!-- 热门标签 -->
    <div class="hotlabel">
      <span
        class="hot-item"
        :style="[{ color: labelname == item.name ? themeColor : '' }]"
        v-for="(item, index) in hotcategories"
        :title="item.name"
        :key="index"
        @click="hotLabel(item.name, item.id)"
        >{{ item.name }}</span
      >
    </div>
  </div>
</template>

<script>
import { getVideogroup, getVideocategory } from "@/api/video.js";
export default {
  name: "",
  components: {},
  props: {
    themeColor: {
      type: String
    }
  },
  data() {
    return {
      alllabel: false,
      allvideo: "allvideo", // 主题类
      categories: "", //全部视频分类
      hotcategories: "", //热门视频分类
      labelname: "全部视频",
      upactiveText: ""
    };
  },
  computed: {
    tokenCookie() {
      return this.$store.state.tokenCookie;
    }
  },
  watch: {
    $route() {
      this.labelname =
        this.$route.query.cat !== undefined
          ? this.$route.query.cat
          : "全部视频";
    }
  },
  created() {
    this.labelname =
      this.$route.query.cat !== undefined ? this.$route.query.cat : "全部视频";
    // 获取视频分类
    this.getVideogroup();
    // 获取推荐视频分类
    this.getVideocategory();
  },
  mounted() {},
  methods: {
    // 获取视频分类
    async getVideogroup() {
      const { data } = await getVideogroup({
        cookie: this.tokenCookie.cookie
      });
      this.categories = data.data;
    }, // 获取推荐视频分类
    async getVideocategory() {
      const { data } = await getVideocategory({
        cookie: this.tokenCookie.cookie
      });
      this.hotcategories = data.data;
    },
    // 热门标签
    hotLabel(name, id) {
      this.labelname = name;
      this.$router.push({
        name: "videolist",
        query: {
          cat: name,
          id
        }
      });
      this.title();
    }, // 全部标签
    onlabelClick(name, id) {
      this.labelname = name;
      this.title();
      this.$router.push({
        name: "videolist",
        query: {
          cat: name,
          id
        }
      });
      this.$refs.popover.doClose();
      // this.$emit("labelname", name);
    },
    allClick() {
      // this.$emit("labelname", "");
      // this.hotindex = 0;
      this.labelname = "全部视频";
      this.$router.push({
        name: "video"
      });
      this.title();
      this.$refs.popover.doClose();
    },
    upActive(name) {
      this.upactiveText = name;
    },
    title() {
      document.title = this.labelname + "视频" + " - 网抑云";
    }
  }
};
</script>

<style lang="scss">
.videostyle {
  display: flex;
  justify-content: space-between;
}
.el-popover {
  width: 50rem;
  overflow: auto;
  height: 31.25rem;
}

.video-box {
  overflow: hidden;
  .video-item {
    display: flex;
    margin-top: 1.25rem;
    .video-right {
      overflow: auto;
      ul {
        //  width: 75%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0;
        overflow: auto;
        li {
          width: 6.875rem;
          height: 1.875rem;
          line-height: 2.1875rem;
          text-align: center;
          cursor: pointer;
          padding: 0.625rem 0;
        }
      }
    }
  }
}
.all-label {
  width: 5rem;
  height: 2.1875rem;
  border-radius: 1.25rem;
  line-height: 2.1875rem;
  border: 0.0625rem solid #a2a2a2;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  padding: 0.0625rem 0.625rem;
  overflow: hidden;
}
.all-label:hover {
  background: rgba($color: #e6e6e6, $alpha: 0.5);
}
.hotlabel {
  display: flex;
  span {
    //  width: 5rem;
    //  height: 1.875rem;
    //  line-height: 1.875rem;
    text-align: center;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.3125rem 0.625rem;
  }
}
</style>
